<template>
	<view class="app background">
		<AppNavbar :bgColor="'transparent'" title="Forgot Password"></AppNavbar>
		<view class="forgot-content flex-center-center">
			<view class="forgot-content-flex flex-center-center">
				<Myform :data="state.formData" :rules="state.rules" ref="myFormRef"></Myform>
				<view class="forgot-illustrate f-size-12 font-weight-600">
					<text>The password must be a combination of 8-16 Englishletters, numbers, and characters (cannot be
						pure numbers)</text>
				</view>
				<button class="form-button mybutton" @click="submit">OK</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		updatePwdByEmailApi
	} from '@/api/account.js'
	const myFormRef = ref(null)
	const state = reactive({
		formData: [{
				prop: 'userEmail',
				label: 'E-Mail',
				value: '',
				line: true
			},
			{
				prop: 'code',
				label: 'Verification code',
				value: '',
				type: 'Code',
				line: true,
				reference: 'userEmail',
				codeType: 'email'
			},
			{
				prop: 'newPassword',
				label: 'Set a password',
				value: '',
				type: 'private',
				line: true
			},
			{
				prop: 'conFirmPassword',
				label: 'Confirm password',
				value: '',
				type: 'private',
				line: true
			}
		],
		rules: {

			code: 'code',
			userEmail: 'email',
			newPassword: 'password',
			conFirmPassword: {
				prop: 'newPassword',
				type: 0
			}

		}
	})
	const submit = async () => {
		const data = await myFormRef.value.verify()
		// data.loginType = 2
		if (!data) {
			return
		}
		const res = await updatePwdByEmailApi(data)
		if (res.code === 200) {
			uni.tools.showTips('Modified successfully')
			goto('/pages/login/login')
		} else {

			uni.tools.showTips(res.msg)
		}
	}
</script>

<style scoped lang="scss">
	.app {
		.forgot-content {
			width: 100%;
			position: fixed;
			bottom: 50rpx;

			.forgot-content-flex {
				width: 95%;

				.mybutton {
					background: $uni-bg-linear;
					color: $uni-bg-color;
				}

				.forgot-illustrate {
					text {
						display: inline-block;
						margin: 30rpx 0;
					}

					width: 97%;
					text-align: center;
					color: $uni-bg-color;
				}
			}
		}

		::v-deep .u-form-item__body__right__message {
			margin-left: 15px !important;
		}
	}
</style>